<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 媒体的类型：all(default)\ print screen */
        /* 类型和and可以省略 
        媒体类型的结构 与或非

        
        
        */
        
        @media screen and (min-width: 768px),
        (max-width: 1024px) {
            body {
                background-color: red;
            }
        }
        
        {}
        
        @media screen and (min-width:680px) {
            body {
                background-color: orange;
            }
        }
        
        @media (min-width: 768px) {
            body {
                background-color: red;
            }
        }
    </style>
</head>
<!-- 

    flex项目
     flex容器里的所有子元素自动成为容器里的成员  称为flex项目
项目默认的是主轴  主轴是X轴

display：flex 将对象作为弹性盒子伸缩展示
dispaly:inline-flex:将对象作为内联块级弹性盒子伸缩展示   宽度由内容撑开
    
 -->

<body>

</body>

</html>